<template>
  <div>
      <common-head title="商品详情"></common-head>
      <div class="wrap" v-if="detail.basicInfo">
          <van-swipe class="swiper1">
              <van-swipe-item v-for="banner in detail.pics" :key="banner.id">
                  <img :src="banner.pic" alt="">
              </van-swipe-item>
          </van-swipe>
          <div class="rap">
          <h4 class="name">
              {{ detail.basicInfo.name }}
          </h4>
           <p class="price">
             {{detail.basicInfo.originalPrice | currency('￥') }}
             </p>
           <p class="characteristic">
            {{detail.basicInfo.characteristic}}
          </p>
          <p class="tags">
            {{detail.basicInfo.tags}}
          </p>
          <p class="purchaseNotes">
            {{detail.basicInfo.purchaseNotes}}
          </p>
          </div>
          <div class="content" v-html="detail.content"></div>
      </div>
      <!-- 商品弹出 -->
      <van-popup
         position="bottom"
         round
         closeable
         :style="{ height: '40%' }"
        v-model="show">
        <div class="content-card">
          <van-card
            :num="sku.num"
            :price="sku.minPrice"
            :title="sku.name"
            :thumb="sku.pic"
          >
            <template #footer>
              <van-stepper v-model="sku.num" />
            </template>
          </van-card>
          <van-button @click="confirm" color="#FF734C" round size="large">确定</van-button>
        </div>
        </van-popup>
      <!-- /商品弹出 -->
      <!-- 商品行动栏 -->
      <van-goods-action>
        <van-goods-action-icon 
         @click="$router.push('/home')"
         icon="wap-home-o" text="首页" />
        <van-goods-action-icon
          @click="$router.push('/cart')"
         icon="cart-o" text="购物车" :badge="$store.state.cart.items.length || ''" />
         <van-goods-action-icon
          icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button
          @click="showPop(1)"
          type="warning" text="加入购物车" />
        <van-goods-action-button
          @click="showPop(2)"
          type="danger" text="立即购买" />
      </van-goods-action>
      <!-- /商品行动栏 -->

  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { fetchItemDetail } from '@api'
import { currency, subStr } from '@/filters'
import addCart from '@/mixins/addCart'
export default {
  mixins: [addCart],
  data () {
    return {
      detail: {},
      // content: ''
      show: false,
      sku: {
        num: 1,
        checked: true
      },
      index: -1
    }
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    confirm () {
      if (this.index === 1) {
        this._addCart(this.sku)
      } else {
        alert('立即购买')
      }
      this.show = false
    },
    showPop (n) {
      this.show = true
      this.index = n
    },
    fetchDetail () {
      fetchItemDetail(this.$route.params.itemId).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.detail = res.data.data
          // this.content = res.data.data.content.replace(/<img/g, 'img style="display:block;width:100%"')
          this.sku = {
            ...this.sku,
            ...res.data.data.basicInfo
          }
        }
      })
    }
  },
  filters: {
    currency,
    subStr
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap{
    margin-top: 44px;
    margin-bottom: 50px;
    .rap{
      padding: 5px 10px 10px 10px;
    }
    img{
        width: 100%;
    }
    .content{
        /deep/ img{
            vertical-align: bottom;
            width: 100%;
        }
    }
    .name{
      font-size: 20px;
      margin-bottom: 10px;
    }
    .price{
      color: #FF734C;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .characteristic{
      border-radius: 10px;
      color: pink;
      // background-color: rgb(163, 147, 147);
      font-size: 16px;
      margin-bottom: 10px;
    }
    .purchaseNotes{
      border-radius: 10px;
      // border: 1px solid red;
      background-color: #fff0ec;
      color: red;
      margin-top: 10px;
    }
}
.content-card{
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  padding: 10px;
  padding-top: 30px;
  box-sizing: border-box;
}
</style>
